<div class="options">
  <a
    mat-raised-button
    href="https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/gridSizes"
    target="_blank"
    class="source-code-button"
  >
    <mat-icon>open_in_new</mat-icon>
    Source
  </a>
  <markdown [src]="'assets/gridSizes.md'"></markdown>
</div>
<div class="options-header">
  <mat-form-field>
    <mat-label>Min Grid Cols</mat-label>
    <input matInput [(ngModel)]="options.minCols" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Grid Cols</mat-label>
    <input matInput [(ngModel)]="options.maxCols" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Grid Cols</mat-label>
    <input matInput [(ngModel)]="options.minRows" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Grid Rows</mat-label>
    <input matInput [(ngModel)]="options.maxRows" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Grid Cols</mat-label>
    <input matInput [(ngModel)]="options.maxItemCols" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Grid Cols</mat-label>
    <input matInput [(ngModel)]="options.minItemCols" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Item Rows</mat-label>
    <input matInput [(ngModel)]="options.maxItemRows" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Item Rows</mat-label>
    <input matInput [(ngModel)]="options.minItemRows" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Item Area</mat-label>
    <input matInput [(ngModel)]="options.maxItemArea" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Item Area</mat-label>
    <input matInput [(ngModel)]="options.minItemArea" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Default Item Rows</mat-label>
    <input matInput [(ngModel)]="options.defaultItemRows" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Default Item Cols</mat-label>
    <input matInput [(ngModel)]="options.defaultItemCols" type="number" (ngModelChange)="changedOptions()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Add Empty Rows Count</mat-label>
    <input [(ngModel)]="options.addEmptyRowsCount" (ngModelChange)="changedOptions()" matInput max="30" min="0" step="1" type="number" />
  </mat-form-field>
  <button mat-mini-fab (click)="addItem()" class="add-button cols-2">
    <mat-icon>add</mat-icon>
  </button>
</div>

<gridster [options]="options">
  @for (item of dashboard; track item.id) {
    <gridster-item [item]="item">
      <div class="button-holder">
        <button mat-mini-fab (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </gridster-item>
  }
</gridster>
